<template>
  <div>
    <div class="bod">
      <div class="annui">
        <button class="del">删除</button>
        <button class="add" @click="ad()">
          <el-icon><Plus /></el-icon>
          新增
        </button>
      </div>
      <div class="tab">
        <el-table
          :data="tab.tableData"
          height="100vh"
          style="width: 100%"
          :cell-style="{ padding: '20px 0' }"
        >
          <el-table-column align="center" type="selection" width="55" />
          <el-table-column align="center" prop="name" label="排序" />
          <el-table-column align="center" prop="type" label="导航名称" />
          <el-table-column align="center" prop="sun" label="分类图片" />
          <el-table-column align="center" prop="kaiguan" label="状态">
            <template #default="scope">
              <el-switch v-model="tab.tableData[scope.$index].kaiguan" />
            </template>
          </el-table-column>
          <el-table-column align="center" prop="sun" label="备注" />
          <el-table-column
            prop="guoqi"
            label="操作"
            fixed="right"
            width="120"
            align="center"
          >
            <button class="compile" @click="bianji(scope)">
              <el-icon><MoreFilled /></el-icon>
            </button>
            <button class="deleter">
              <el-icon><Delete /></el-icon>
            </button>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div>
      <Chouti ref="shiyan" title="编辑分类" size="600px">
        <Store></Store>
      </Chouti>
    </div>
    <div>
      <Chouti ref="adds" title="新增分类" size="30%">
        <Store2></Store2>
      </Chouti>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ShujuStore } from "../Marketing/hsuju.js";
import Chouti from "@/components/chouti.vue";
import Store from "./Store.vue";
import Store2 from "./Store2.vue";

const tab = ShujuStore();

const shiyan = ref(null);

const value2 = ref(false);

const adds = ref(null);

function bianji() {
  shiyan.value.alter();
}
function ad() {
  adds.value.addls();
}
</script>

<style scoped>
button {
  text-align: center;
  width: 70px;
  height: 36px;
  border-radius: 5px;
  line-height: 36px;
  outline: none;
  border: transparent;
  background-color: rgb(255, 106, 108);
  color: white;
  font-size: 14px;
}
button:hover {
  opacity: 0.8;
}
.bod {
  width: 100%;
  height: 80vh;
  background-color: white;
  border-radius: 10px;
  position: relative;
}
.del {
  background-color: blueviolet;
}
.add {
  background-color: #ffa66a;
}
.annui {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20px;
}
.compile {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  border: 1px solid #dcdfe6;
  color: #7a7b7f;
}
.compile:hover {
  background-color: rgb(255, 106, 108);
}
.deleter {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 10px;
  background-color: white;
  border: 1px solid #dcdfe6;
  color: #7a7b7f;
  line-height: 40px;
}
.deleter:hover {
  background-color: rgb(255, 106, 108);
}
.bottom {
  position: absolute;
  bottom: 20px;
}
</style>
